<template>
  <div class="am-content">
    <div class="amc-toolbar">
      <el-date-picker
        v-model="pickerTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        align="right"
        @change="datePickerChanage">
      </el-date-picker>
      <el-button type="success" icon="el-icon-search" style="margin-left:10px;" @click="toQuery">搜索</el-button>
      <el-button type="warning" icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
    </div>
    <el-table border stripe :data="dailyList" :header-cell-style="tableHeaderCellStyle">
      <el-table-column prop="createTime" label="时间" align="center" width="180"/>
      <el-table-column prop="vpCount" label="视频报警数" align="center" width="120"/>
      <el-table-column prop="vpConnected" label="接通数" align="center" width="120"/>
      <el-table-column prop="vpDisconnect" label="漏接数" align="center" width="120"/>
      <el-table-column prop="mpCount" label="图文报警数" align="center" width="120"/>
      <el-table-column prop="acCount" label="事故数" align="center" width="120"/>
      <el-table-column prop="acFinished" label="事故处理数" align="center" width="120"/>
      <el-table-column prop="acUnfinished" label="事故未处理数" align="center" width="120"/>
      <el-table-column prop="taVisitPerson" label="小程序访问人数" align="center" width="120"/>
      <el-table-column prop="taVisitCount" label="小程序访问次数" align="center" width="120"/>
    </el-table>
    <el-table :data="totalCount">
      <el-table-column prop="time" label="" width="180"></el-table-column>
      <el-table-column prop="totalVpCount" label="视频报警数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="totalVpConnected" label="接通数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="totalVpDisconnect" label="漏接数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="totalMpCount" label="图文报警数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="acCount" label="事故数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="acFinished" label="事故处理数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="acUnfinished" label="事故未处理数总计" align="center" width="160"></el-table-column>
      <el-table-column prop="totalTaVisitPerson" label="访问人数总计" align="center" width="120"></el-table-column>
      <el-table-column prop="totalTaVisitCount" label="访问次数总计" align="center" width="120"></el-table-column>
    </el-table>
    <el-pagination :current-page="curPage" :page-size="limit" layout="total, prev, pager, next" :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import CommonStyle from "@/util/CommonStyle";
import ElDatePicker from "@/mixins/ElDatePicker";
import HttpConnection from "@/util/HttpConnection";
export default {
  name: "ManageStatistics",
  mixins: [ElDatePicker],
  data() {
    return {
      tableHeaderCellStyle: CommonStyle.tableHeaderCellStyle,
      curPage: 1,
      limit: 10,
      query: {},
      total: 0,
      dailyList: [],
      totalCount: [],
    }
  },
  mounted() {
    let that = this;
    that.queryData();
  },
  methods: {
    queryData(){
      let that = this;
      HttpConnection.post("/api-bureau/portal/statistic/analysis", {
        current: that.curPage,
        size: that.limit,
        ...that.query
      }).then(function(response) {
        that.dailyList = response.data[0].dailyList;
        that.totalCount = response.data[0].totalCount;
        that.total = response.count;
      });
    },
    toQuery() {
      this.curPage = 1;
      this.queryData();
    },
    resetQuery() {
      this.curPage = 1;
      this.query = {};
      this.queryData();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.queryData();
    },
    handleCurrentChange(val) {
      this.curPage = val;
      this.queryData();
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/police-common.scss";
</style>
